/**
 * EventDetail 事件详情组件
 * @author: muisuidaan
 */

import styled from "styled-components";

import styles from "./index.less";
import cn from "classnames";

interface infoProps {
  [key: string]: string | null;
}
interface Props {
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode | string; //图表区域
  info: infoProps;
  type: string; //事件类型
}
const Content = (props: Props) => {
  const { className, style, children, info, type } = props;

  return type === "assets" ? (
    <div className={cn(styles.event_detail_wrapper, className)} style={style}>
      <div className={styles.left_container}>
        <div
          dangerouslySetInnerHTML={{ __html: info?.dataMessage || "-" }}
          className={styles.top}
        ></div>
        <div
          dangerouslySetInnerHTML={{ __html: info?.dataMemo}}
          className={styles.bottom}
        ></div>
      </div>
      <div className={styles.right_container}>{children}</div>
    </div>
  ) : (
    <div className={cn(styles.event_detail_wrapper, className)} style={style}>
      <div
        dangerouslySetInnerHTML={{ __html: info?.dataMessage || "-" }}
        className={styles.top}
      ></div>
      {children}
      <div
        dangerouslySetInnerHTML={{ __html: info?.dataMemo }}
        className={styles.bottom}
      ></div>
    </div>
  );
};

// 事件详情
const EventDetail = styled(Content)``;
export default EventDetail;
